<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common/common::head-fragment('帖子详情')}">
</head>
<body>
<div th:insert="~{common/common::header-fragment}"></div>

<div class="fly-panel fly-column">
    <div class="layui-container">
        <ul class="layui-clear">
            <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"><a href="/">首页</a></li>
            <th:block th:unless="${null == myPostCategories}">
                <th:block th:each="c : ${myPostCategories}">
                    <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                        <a th:href="@{${'/index?categoryId='+c.categoryId}}"
                           th:text="${c.categoryName}">分享</a>
                    </li>
                </th:block>
            </th:block>

            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
        </ul>

        <div class="fly-column-right layui-hide-xs">
            <a th:href="@{/addPostPage}" class="layui-btn">发布新帖</a>
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div th:if="${myPost.postStatus == 1 || userRole.code eq 'admin' || userRole.code eq 'sysAdmin'}" class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
<!--                <div class="fly-column-left layui-hide-xs">-->
<!--                <a class="layui-btn" onclick="goBack()">-->
<!--                    返回-->
<!--                </a>-->
<!--                </div>-->
                <i class="iconfont icon-guanbi" onclick="goBack()"></i>
                <h1 style="margin-top: 10px" th:text="${myPost.postTitle}">评论标题</h1>
                <div class="fly-detail-info" style="height: 5px">
                    <div th:if="${myUser.userId eq postUser.userId}">
                        <a class="layui-btn layui-btn-xs jie-admin" th:href="@{'/editPostPage/'+${myPost.postId}}">
                            编辑
                        </a>
                    </div>
                    <th:block th:if="${pageUserRole.code ne 'admin' && pageUserRole.code ne 'sysAdmin'}">
                        <th:block th:if="${userRole.code eq 'admin' || userRole.code eq 'sysAdmin'}">
                            <div th:if="${myPost.postStatus == 1}">
                                <a class="layui-btn layui-btn-xs jie-admin" onclick="myPopover()">
                                    封禁
                                </a>
                            </div>
                            <div th:if="${myPost.postStatus != 1}">
                                <a class="layui-btn layui-btn-xs jie-admin" onclick="unBannedPost()">
                                    解封
                                </a>
                            </div>
                        </th:block>
                    </th:block>
                    <span class="fly-list-nums">
                        <a href="#comments">
                            <i class="iconfont" title="评论">&#xe60c;</i>
                            <th:block th:text="${myPost.postComments}"></th:block>
                        </a>
                        <i class="iconfont" title="人气">&#xe60b;</i>
                        <th:block th:text="${myPost.postViews}"></th:block>
                    </span>
                </div>
                <div class="detail-about">
                    <a class="fly-avatar" th:href="@{${'/userCenter/'+postUser.userId}}">
                        <img th:src="@{${postUser.headImgUrl}}">
                    </a>
                    <div class="fly-detail-user">
                        <a th:href="@{${'/userCenter/'+postUser.userId}}" class="fly-link">
                            <cite th:text="${postUser.nickName}">昵称</cite>
                            <span>
                              <th:block th:if="${postUser.userStatus==0}">账号正常
                              </th:block>
                              <th:block th:if="${postUser.userStatus==1}">账号已被封
                              </th:block>
                            </span>
                        </a>
                    </div>
                    <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                        <span th:text="${#dates.format(myPost.createTime, 'yyyy-MM-dd')}">2021-08-01</span>
                        <span style="margin-left: 6px; padding-right: 10px; color: #FF7200"
                              th:text="${'最新修改时间：'+#dates.format(myPost.lastUpdateTime, 'yyyy-MM-dd HH:mm:ss')}">2021-08-01</span>
                    </div>
                </div>
                <div class="detail-body photos" th:utext="${myPost.postContent}">
                </div>
                <div style="text-align: center;">
                    <th:block th:unless="${currentUserCollectFlag}">
                        <a href="##" th:onclick="'collect('+${myPost.postId}+')'">
                        <span style="color: red;">
                            <i class="iconfont icon-zan"></i>
                            收藏&nbsp;&nbsp;(<th:block th:text="${myPost.postCollects}"></th:block>)
                        </span>
                        </a>
                    </th:block>
                    <th:block th:if="${currentUserCollectFlag}">
                        <a href="##" th:onclick="'delCollect('+${myPost.postId}+')'">
                        <span style="color: grey;">
                            <i class="iconfont icon-zan"></i>
                            取消收藏&nbsp;&nbsp;(<th:block th:text="${myPost.postCollects}"></th:block>)
                        </span>
                        </a>
                    </th:block>
                </div>
            </div>

            <div class="fly-panel detail-box" id="comments">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    <th:block th:if="${#lists.isEmpty(commentsPage.list)}">
                        <!-- 无数据时 -->
                        <li class="fly-none">消灭零回复</li>
                    </th:block>
                    <th:block th:unless="${#lists.isEmpty(commentsPage.list)}">
                        <th:block th:each="myCommentListEntity : ${commentsPage.list}">
                            <li data-id="ll">
                                <div class="detail-about detail-about-reply">
                                    <a class="fly-avatar"
                                       th:href="@{${'/userCenter/'+myCommentListEntity.commentUserId}}">
                                        <img th:src="@{${myCommentListEntity.headImgUrl}}"
                                             th:alt="${myCommentListEntity.nickName}">
                                    </a>
                                    <div class="fly-detail-user">
                                        <a th:href="@{${'/userCenter/'+myCommentListEntity.commentUserId}}"
                                           class="fly-link">
                                            <cite th:text="${myCommentListEntity.nickName}">用户名称</cite>
                                        </a>
                                    </div>
                                    <div class="detail-hits">
                                        <span th:text="${#dates.format(myCommentListEntity.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}">2021-08-01</span>
                                    </div>
                                </div>
                                <div class="detail-body jieda-body photos">
                                    <p th:text="${myCommentListEntity.commentBody}">回复内容</p>
                                </div>
                                <div class="jieda-reply">
                                    <a href="#replyTextarea"
                                       th:onclick="'preReply('+${myCommentListEntity.commentUserId}+')'">
                                    <span type="reply">
                                    <i class="iconfont icon-svgmoban53"></i>
                                    回复
                                    </span>
                                    </a>
                                    <div class="jieda-admin">
                                        <span type="del" th:onclick="'delReply('+${myCommentListEntity.commentId}+')'">删除</span>
                                    </div>
                                </div>
                            </li>
                        </th:block>
                    </th:block>
                </ul>
                <th:block th:unless="${#lists.isEmpty(commentsPage.list)}">
                    <!-- 有数据时才会显示分页按钮 -->
                    <div style="text-align: center">
                        <div class="laypage-main">
                            <th:block th:if="${commentsPage.currPage>1}">
                                <a class="laypage-prev"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage-1}+'#comments'}">
                                    &lt;&lt;</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage==1}">
                                <a class="laypage-prev"
                                   href="##">
                                    &lt;&lt;</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage-2 >=1}">
                                <a class="laypage-prev"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage-2}+'#comments'}"
                                   th:text="${commentsPage.currPage - 2}">1</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage-1 >=1}">
                                <a class="laypage-prev"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage-1}+'#comments'}"
                                   th:text="${commentsPage.currPage - 1}">1</a>
                            </th:block>
                            <a href="##" class="laypage-curr" th:text="${commentsPage.currPage}">1</a>
                            <th:block th:if="${commentsPage.currPage+1<=commentsPage.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage+1}+'#comments'}"
                                   th:text="${commentsPage.currPage + 1}">1</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage+2<=commentsPage.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage+2}+'#comments'}"
                                   th:text="${commentsPage.currPage + 2}">1</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage<commentsPage.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{'/detail/'+${myPost.postId}+'?commentPage=' + ${commentsPage.currPage+1}+'#comments'}">
                                    &gt;&gt;</a>
                            </th:block>
                            <th:block th:if="${commentsPage.currPage==commentsPage.totalPage}">
                                <a class="laypage-next"
                                   href="##">
                                    &gt;&gt;</a>
                            </th:block>
                        </div>
                    </div>
                </th:block>

                <div class="layui-form layui-form-pane" id="replyTextarea">
                    <form method="post" id="replyForm" onsubmit="return false;" action="##">
                        <input type="hidden" id="postId" name="postId" th:value="${myPost.postId}">
                        <input type="hidden" id="parentCommentUserId" name="parentCommentUserId" value="0">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <textarea id="commentBody" name="commentBody" required lay-verify="required"
                                          placeholder="请输入内容" class="layui-textarea fly-editor"
                                          style="height: 150px;"></textarea>
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <label for="verifyCode" class="layui-form-label">验证码</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="text" id="verifyCode" name="verifyCode" required lay-verify="required"-->
<!--                                       placeholder="请输入验证码" autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                            <div class="layui-form-mid">-->
<!--                             <span><img data-tooltip="看不清楚？换一张"-->
<!--                                        th:src="@{/common/captcha}"-->
<!--                                        onclick="this.src='/common/captcha?d='+new Date()*1"-->
<!--                                        alt="单击图片刷新！"></span>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item">
                            <input type="hidden" name="jid" value="123">
                            <button class="layui-btn" lay-filter="*" lay-submit onclick="reply()">提交回复</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div th:if="${myPost.postStatus != 1 && userRole.code ne 'admin' && userRole.code ne 'sysAdmin'}" class="layui-col-md8 content detail">
            <h3>此文章已被封</h3>
        </div>

        <div class="layui-col-md4">
            <!-- 人气用户-->
            <div class="fly-panel" style="height: 440px">
                <h3 class="fly-panel-title">人气用户</h3>
                <canvas id="myChart" height="300"></canvas>
            </div>
            <!--本周热议-->
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                <th:block th:if="${#lists.isEmpty(hotTopicMyPostList)}">
                    <!-- 无数据时 -->
                    <div class="fly-none">没有相关数据</div>
                </th:block>
                <th:block th:unless="${#lists.isEmpty(hotTopicMyPostList)}">
                    <th:block th:each="myEntity : ${hotTopicMyPostList}">
                        <dd>
                            <a th:href="@{'/detail/'+${myEntity.postId}}"
                               th:text="${myEntity.postTitle}">帖子标题</a>
                            <span>
                                <i class="iconfont icon-pinglun1"></i>
                                <th:block th:text="${myEntity.postComments}"></th:block>
                            </span>
                        </dd>
                    </th:block>
                </th:block>
            </dl>
            <!--友情连接-->
            <div class="fly-panel fly-link">
                <h3 class="fly-panel-title">友情链接</h3>
                <dl class="fly-panel-main">
                    <ul>
                        <li><dd><a href="https://github.com/" target="_blank">github(代码厂库)</a><dd></li>
                        <li><dd><a href="https://gitee.com/" target="_blank">gitee(码云)</a><dd></li>
                        <li><dd><a href="https://spring.io/" target="_blank">spring(spring官方文档)</a><dd></li>
                        <li><dd><a href="https://www.bilibili.com/" target="_blank">bilibili(B站)</a><dd></li>
                        <li><dd><a href="https://www.baidu.com/" target="_blank">baidu(百度)</a><dd></li>
                        <li><dd><a href="https://snailclimb.gitee.io/javaguide/#/" target="_blank">javaguide(java面试看点)</a><dd></li>
                    </ul>
                </dl>
            </div>


        </div>
    </div>

    <div id="info" style="display: none; text-align: center">
        <div style="text-align: center;vertical-align: middle; flex: content"  class="layui-input-inline">
            <p style="text-align: center">确认要封禁此文章吗?</p>
        </div>
    </div>
    <div id="unBanned" style="display: none; text-align: center">
        <div style="text-align: center;vertical-align: middle; flex: content"  class="layui-input-inline">
            <p style="text-align: center">确认要解封此文章吗?</p>
        </div>
    </div>
</div>

<div th:insert="~{common/common::footer}"></div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/public.js}"></script>
<script th:src="@{/js/chart/chart.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['layer', 'element', 'jquery'], function () {
        var layer = layui.layer, $ = layui.$, element = layui.element;
        var device = layui.device();
        //阻止IE7以下访问
        if (device.ie && device.ie < 8) {
            layer.alert('如果您非得使用 IE 浏览器访问社区，那么请使用 IE8+');
        }
        // 返回
        window.goBack = function (){
            history.back();
        }

        // chart
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [[${nickNames}]],
                datasets: [{
                    label: '文章浏览量',
                    data: [[${sumViews}]],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        // 封禁弹窗
        window.myPopover = function () {
            layer.open({
                type: 1//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                , title: false //不显示标题栏
                , closeBtn: false
                , area: ['300px', '100px']//定义宽高
                , shade: 0.8//遮幕
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['完成', '取消']
                , btnAlign: 'c'//按钮排列：居中对齐
                , moveType: 1 //拖拽模式，0或者1
                , content: $("#info")//跳转到想要的界面，这里是我自己项目的跳转界面
                , yes: () => {
                    let postId = $("#postId").val();
                    let params = {
                        postId: postId
                    };
                    $.ajax({
                        type: "POST",
                        url: "/postBanned",
                        data: params,
                        async: false,
                        success: function (result) {
                            if (result.resultCode === 200) {
                                layer.msg("封禁成功");
                            } else {
                                layer.msg(result.message);
                            }
                        },
                        error: function () {
                            layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                        }
                    });
                    window.setTimeout(function () {
                        window.location.reload();
                    },700)
                }
            })
        }

        // 解封弹窗
        window.unBannedPost = function () {
            layer.open({
                type: 1//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                , title: false //不显示标题栏
                , closeBtn: false
                , area: ['300px', '100px']//定义宽高
                , shade: 0.8//遮幕
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['完成', '取消']
                , btnAlign: 'c'//按钮排列：居中对齐
                , moveType: 1 //拖拽模式，0或者1
                , content: $("#unBanned")//跳转到想要的界面，这里是我自己项目的跳转界面
                , yes: () => {
                    let postId = $("#postId").val();
                    let params = {
                        postId: postId
                    };
                    $.ajax({
                        type: "POST",
                        url: "/postUnBanned",
                        data: params,
                        async: false,
                        success: function (result) {
                            if (result.resultCode === 200) {
                                layer.msg("解封成功");
                            } else {
                                layer.msg(result.message);
                            }
                        },
                        error: function () {
                            layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                        }
                    });
                    window.setTimeout(function () {
                        window.location.reload();
                    },700)
                }
            })
        }
        //回复按钮的触发事件
        window.preReply = function (parentCommentUserId) {
            $('#parentCommentUserId').val(parentCommentUserId);
        }

        //评论
        window.reply = function (postId) {
            var $ = layui.$;
            // var verifyCode = $("#verifyCode").val();
            // if (!validLength(verifyCode, 5, 0)) {
            //     layer.alert('验证码长度区间为: (0-5]!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
            //     return false;
            // }
            var commentBody = $("#commentBody").val();
            if (!validLength(commentBody, 500, 0)) {
                layer.alert('评论长度区间为: (0,500]!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                return false;
            }
            var params = $("#replyForm").serialize();
            var url = '/replyPost';
            $.ajax({
                type: 'POST',//方法类型
                url: url,
                data: params,
                success: function (result) {
                    if (result.resultCode == 200) {
                        layer.confirm('评论成功!', {
                            icon: 3,
                            skin: 'layui-layer-molv',
                            title: '提示'
                        }, function (index) {
                            layer.close(index);
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.message);
                    }
                    ;
                },
                error: function () {
                    layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                }
            });
        }

        //删除评论
        window.delReply = function (commentId) {
            var $ = layui.$;
            $.ajax({
                type: 'POST',//方法类型
                url: '/delReply/' + commentId,
                success: function (result) {
                    if (result.resultCode == 200) {
                        layer.confirm('删除成功!', {
                            icon: 3,
                            skin: 'layui-layer-molv',
                            title: '提示'
                        }, function (index) {
                            layer.close(index);
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.message);
                    }
                    ;
                },
                error: function () {
                    layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                }
            });
        }

        //收藏
        window.collect = function (postId) {
            var $ = layui.$;
            $.ajax({
                type: 'POST',//方法类型
                url: '/addCollect/' + postId,
                success: function (result) {
                    if (result.resultCode == 200) {
                        layer.confirm('收藏成功!', {
                            icon: 3,
                            skin: 'layui-layer-molv',
                            title: '提示'
                        }, function (index) {
                            layer.close(index);
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.message);
                    }
                },
                error: function () {
                    layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                }
            });
        }

        //取消收藏
        window.delCollect = function (postId) {
            var $ = layui.$;
            $.ajax({
                type: 'POST',//方法类型
                url: '/delCollect/' + postId,
                success: function (result) {
                    if (result.resultCode == 200) {
                        layer.confirm('取消收藏成功!', {
                            icon: 3,
                            skin: 'layui-layer-molv',
                            title: '提示'
                        }, function (index) {
                            layer.close(index);
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.message);
                    }
                    ;
                },
                error: function () {
                    layer.alert('操作失败!', {title: '提醒', skin: 'layui-layer-molv', icon: 2});
                }
            });
        }

    });


</script>
</body>
</html>